<template>
  <div class="echarts-main">
    <div id="demo" class="demo"></div>
    <!-- 订单柱状图 -->
    <div class="order-e">
      <OrderEcharts :order-data="orderData"/>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import OrderEcharts from './components/OrderEcharts.vue'
import { mockData } from './mockOrder'
export default {
  name: 'Dashboard',
  computed:{
    orderData() {
      return mockData()
    }
  },
  components:{
    OrderEcharts
},
  created(){},
  mounted() {
    //初始化echarts对象
    var demoEchart = echarts.init(document.getElementById('demo'))
    //声明options对象
    var option = {
       xAxis: {
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {},
        series: [
          {
            type: 'pie',
            data: [23, 24, 18, 25, 27, 28, 25]
          }
        ]
    }
    //设置图标
    demoEchart.setOption(option)
  }
}
</script>

<style lang="scss" scoped>
.echarts-main{
  .demo{
    width: 600px;
    height: 600px;
    border:1px solid red;
  }
}
.order-e{
  width: 600px;
  height:400px;
  margin: 30px auto;

}
</style>
